{% block sw_sidebar_media_item %}
<sw-sidebar-item
    ref="sidebarItem"
    class="sw-sidebar-media-item"
    icon="regular-image"
    :title="$tc('global.sw-sidebar-media-item.title')"
    :disabled="disabled"
>

    {% block sw_sidebar_media_item_content %}
    <div class="sw-sidebar-media-item__content">
        {% block sw_sidebar_media_item_search_field %}
        <sw-simple-search-field
            v-model:value="term"
            @search-term-change="onSearchTermChange"
        />
        {% endblock %}

        {% block sw_sidebar_media_item_folder_navigation %}
        <sw-media-breadcrumbs
            v-if="!term.length"
            v-model:current-folder-id="mediaFolderId"
            small
        />
        {% endblock %}

        {% block sw_sidebar_media_item_media_item_list %}
        {% block sw_sidebar_media_item_media_item_list_folder_item %}
        <!-- eslint-disable vue/no-use-v-if-with-v-for -->
        <sw-media-folder-item
            v-for="folder in subFolders"
            v-if="!term.length"
            :key="folder.id"
            :item="folder"
            :show-selection-indicator="false"
            :show-context-menu-button="true"
            :selected="false"
            :is-list="true"
            @media-item-click="onNavigateToFolder(folder.id)"
            @media-folder-delete="handleFolderGridItemDelete"
        />
        {% endblock %}

        {% block sw_sidebar_media_item_media_item_list_media_item %}
        <sw-media-media-item
            v-for="mediaItem in mediaItems"
            :key="mediaItem.id"
            v-draggable="{ dragGroup: 'media', data: { mediaItem } }"
            :item="mediaItem"
            :show-selection-indicator="false"
            :show-context-menu-button="true"
            :selected="false"
            :is-list="true"
            @media-item-delete="handleMediaGridItemDelete"
        >

            {% block sw_sidebar_media_item_context_items %}
            <slot
                name="context-menu-items"
                :media-item="mediaItem"
            ></slot>
        {% endblock %}
        </sw-media-media-item>
        {% endblock %}

        {% block sw_sidebar_media_item_load_more_button %}
        <mt-button
            v-if="showMore"
            size="small"
            block
            class="sw-sidebar-media-item__load-more-button"
            variant="secondary"
            @click="onLoadMore"
        >

            {{ $tc('global.sw-sidebar-media-item.labelLoadMore') }}
        </mt-button>
        {% endblock %}
        {% endblock %}

        {% block sw_sidebar_media_item_loader %}
        <sw-loader v-if="isLoading" />
        {% endblock %}
    </div>
    {% endblock %}
</sw-sidebar-item>
{% endblock %}
